<template>
  <div class="scroll-x">
    <ul class="tabs-menu">
      <li v-for="(item, index) in list" :key="item.id" :class="{ active: index === current }" @click="handlerClick(item, index)">
        <span class="label">
          {{ item[label] }}
          <em class="badge" v-if="item.dot"></em>
        </span>
        <span class="number" v-if="item.number">{{ item.number }}</span>
      </li>
    </ul>
  </div>
</template>
<script setup>
  import { ref } from "vue"
  const props = defineProps({
    list: {
      type: Array,
      default: () => [],
    },
    label: {
      type: String,
      default: "label",
    },
    value: {
      type: String,
      default: "value",
    },
  })
  const emit = defineEmits(["change"])

  const current = ref(0)

  const handlerClick = (item, index) => {
    current.value = index
    emit("change", item, index)
  }
</script>

<style lang="scss" scoped>
  .tabs-menu {
    display: flex;
    line-height: 22px;
    color: var(--n-black-light-1);
    font-size: 14px;
    span {
      display: inline-flex;
      line-height: 22px;
    }
    .label {
      position: relative;
    }
    .number {
      padding: 0 5px;
      height: 16px;
      margin-left: 2px;
      line-height: 16px;
      border-radius: 100px;
      background-color: var(--n-black-border);
      color: var(--n-black-light-2);
    }
    .badge {
      position: absolute;
      right: -6px;
      top: 0;
      width: 6px;
      height: 6px;
      border-radius: 10px;
      background-color: var(--n-error);
    }
    li {
      position: relative;
      padding-bottom: 12px;
      display: flex;
      align-items: center;
      cursor: pointer;
      word-break: keep-all;
      &.active {
        color: var(--n-primary);
        &:after {
          display: block;
        }
      }
      + li {
        margin-left: 24px;
      }
      &:after {
        content: "";
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        border-bottom: 2px solid var(--n-primary);
      }
    }
  }
</style>
